{% extends "base.html" %}

{% block title %}登录 - 个人博客{% endblock %}

{% block content %}
<div class="min-h-[70vh] bg-gradient-to-br from-gray-50 via-white to-blue-50 flex items-center justify-center py-16 px-4">
    <div class="w-full max-w-md">
        <!-- 顶部品牌/Logo -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 shadow-lg shadow-blue-500/20">
                <i class="fas fa-feather text-white text-2xl"></i>
            </div>
            <h2 class="mt-4 text-3xl font-extrabold tracking-tight text-gray-900">博主登录</h2>
            <p class="mt-2 text-gray-600">这是个人博客，只有博主可以登录</p>
        </div>

        <!-- 后端消息提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="mb-6 space-y-2">
            {% for category, message in messages %}
            <div class="text-sm px-4 py-3 rounded-lg {{ 'bg-red-50 text-red-700 ring-1 ring-red-100' if category=='error' else 'bg-blue-50 text-blue-700 ring-1 ring-blue-100' }}">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        <!-- 登录卡片 -->
        <div class="bg-white/90 backdrop-blur rounded-2xl shadow-xl ring-1 ring-gray-100 p-6 sm:p-8">
            <form id="login-form" method="POST" action="{{ url_for('auth.login') }}" class="space-y-6" autocomplete="on">
                <!-- 用户名 -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fas fa-user"></i>
                        </span>
                        <input type="text" id="username" name="username"
                               class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400"
                               placeholder="输入用户名" required autocomplete="username">
                    </div>
                </div>

                <!-- 密码 -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fas fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password"
                               class="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400"
                               placeholder="输入密码" required autocomplete="current-password">
                        <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600" onclick="togglePassword()" aria-label="显示/隐藏密码">
                            <i id="pw-eye" class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <!-- 记住我 与 忘记密码（占位） -->
                <div class="flex items-center justify-between">
                    <label class="flex items-center select-none">
                        <input type="checkbox" id="remember" name="remember" value="1" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="ml-2 text-sm text-gray-700">记住我</span>
                    </label>
                    <span class="text-sm text-gray-400">忘记密码？</span>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="w-full inline-flex items-center justify-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-4 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all font-medium shadow-lg shadow-blue-500/20">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    登录
                </button>
            </form>

            <!-- 返回首页 -->
            <div class="mt-6 text-center">
                <a href="{{ url_for('main.index') }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>返回首页
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function togglePassword() {
    const input = document.getElementById('password');
    const eye = document.getElementById('pw-eye');
    if (input.type === 'password') {
        input.type = 'text';
        eye.classList.remove('fa-eye');
        eye.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        eye.classList.remove('fa-eye-slash');
        eye.classList.add('fa-eye');
    }
}
</script>
{% endblock %}
